<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
		<title>个人中心</title>
		<style>
			body {
				text-align: center;
				margin-top: 20px;
			}

			ul {
				/* margin-left: 0px; */
				padding: 0;
			}

			ul li {
				list-style: none;
				margin: 20px 0;
				padding: 0 0;
			}

			.title {
				border: #5FB878 1px solid;
				margin-bottom: 30px;
			}

			.pic img {
				width: 200px;
				height: 200px;
				border-radius: 50%;
			}

			.username {
				margin-top: 15px;
				margin-bottom: 20px;
			}


			.layui-input-block {
				margin: 0 auto;
				width: 50%;
				text-align: center;
				margin-top: 30px;

			}

			.layui-input {
				padding-left: unset;
				text-align: center;
				border-color: #5FB878;
			}
			
			.back{
				margin-bottom: 3px;
				text-align: left;
			}
		</style>
	</head>
	<body>
		<div class="back">
			<button type="button" id="backBtn" class="layui-btn layui-btn-sm layui-btn-primary" style="border: none;">
				<i class="layui-icon layui-icon-left">返回</i>
			</button>
		</div>
		<div class="title">个人信息</div>
		<div class="pic">
			<input type="hidden" id="pic" name="pic"/>
			<img id="userPic" src="image/1.png" />
			<ul>
				<li>
					<form id="uploadForm" enctype="multipart/form-data">
						上传图片:<input id="file" type="file" name="file"/>
					</form>
				</li>
			</ul>
		</div>
		<div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="text" id="userName" name="userName" required lay-verify="required" placeholder="fuxian"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="text" id="sex" name="sex" required lay-verify="required" placeholder="男" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="text" id="phone" name="phone" required lay-verify="required" placeholder="19903779070"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="hidden" id="icNo" name="icNo" />
					<input type="text" maxlength="18" name="icCard" required lay-verify="required" placeholder="身份证号"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" id="commit" lay-submit lay-filter="*">确定</button>
				</div>
			</div>
		</div>
		</div>
		<script src="js/jquery.min.js"> </script>
		<script src="js/common.js"></script>
		<script>
			$(function() {

				$("input[name='icCard']").keyup(function() {
					var icCard = $(this).val();
					console.log(icCard.length);
					if (icCard.length===18) {
						// console.log("icCard after:"+icCard);
						$("#icNo").val(icCard);
						icCard = reSize(icCard);
					}
					$(this).val(icCard);
				});


				$("#commit").on("click",function (){
					submit();
				});

				$("#file").change(function () {
					if ($(this).val() != "") {
						uploadFile();
					}
				});
				
				$("#backBtn").on("click",function(){
					window.location.href="personal-center.html";
				});

			});

			function reSize(icCard){
				// console.log("icCard before:"+icCard);
				return icCard.replace(/(?<=\d{2})\d{12}(?=\d{2})/, "************");
			}

			function submit() {
				var clazz = {
					id:1,
					userName: $("#userName").val(),
					pic: $("#pic").val(),
					sex: $("#sex").val(),
					phone: $("#phone").val(),
					icNo: $("#icNo").val()
				}
				$.ajax({
					type: "post",
					dataType: "json",
					contentType: "application/json;charset=UTF-8",
					url: baseUrl + "user/update.json",
					data: JSON.stringify(clazz),
					success: function (data) {
						if (data.code == "200") {
							window.location.href = "personal-center.html";
						} else {
							layer.msg("修改失败!", {icon: 5});
						}
					}
				});
			}

			function uploadFile() {
				var formData = new FormData($('#uploadForm')[0]);
				if (formData === {} || formData === "") {
					alert("请选择文件")
				}
				formData.append("file", formData.get("file"));

				$.ajax({
					type: 'post',
					url: baseUrl + "newFile.json",
					data: formData,
					cache: false,
					processData: false,
					contentType: false,
					success: function (data) {
						if (data.code == "200") {
							$("#pic").val(data.newPath);
							$("#userPic").attr("src", tUrl + data.newPath);
						} else {
							layer.msg("上传失败!", {icon: 5});
						}
					},
					error: (function () {
						alert("上传失败");
					}),
				});
			}
		</script>
	</body>
</html>
